<template>
	<cxView>

		<cxView :borderRadius="borderRadius" :margin="margin" :marginTop="marginTop" :marginLeft="marginLeft"
			:marginBottom="marginBottom" :marginRight="marginRight" :background="background" :padding="padding">

			<cxView  class="empty-shop-car" v-if="list.length==0" display="flex" flexDirection="column" alignItems="center">
				<cxImg src="@/static/empty_shop_car.png" width="200" height="200"></cxImg>
				<text>当前您的购物车是空的</text>
				<cxView margin="20rpx" color="blue" @confirm="goBuy">去逛逛</cxView>
			</cxView>

			<!-- 有商品时 -->
			<cxView v-else>

				<cxView v-for="(items,indexs) in datas" :key="indexs" background="white" padding="20rpx">
					<!-- 店铺名称 header -->
					<cxView class="store-header" alignItems="center" display="flex">
						<!-- 选中状态按钮 -->
						<cxCheckBox size="40" :checked="items.checked" @changed='storeCheck(indexs,items.checked)'>
						</cxCheckBox>

						<!-- 名称 -->
						<cxText>{{items.name}}</cxText>
						<cxImg src="arrow-right" height="40" width="20" size="20" margin-right="16"></cxImg>
					</cxView>
					<!-- 店铺名称 header end-->
					<!-- 商品信息 start-->
					<cxView v-for="(itemp,indexp) in items.goods" :key="indexp" display="flex" alignItems="center"
						marginTop="20">

						<cxCheckBox size="40" :checked="itemp.checked"
							@changed='goodsCheck(indexs,indexp,itemp.checked)'></cxCheckBox>

						<cxView display="flex" style="flex-grow: 1;">
							<!-- 商品图片 -->
							<cxImg :src="itemp.img" width="160" height="160"></cxImg>
							<cxView display="flex" flexDirection="column" justifyContent="space-around"
								style="flex-grow: 1;" marginLeft="20" height="160">
								<cxView>{{itemp.title}}</cxView>
								<cxView color="#666" size="24">规格：{{itemp.remark}}</cxView>
								<cxView display="flex" justifyContent="space-between">
									<cxView color="#333" fontWeight="400" size="32">¥{{itemp.price}}</cxView>
									<u-number-box v-model="itemp.number"
										@change="valChange(indexs,indexp,itemp.number)"></u-number-box>
								</cxView>
							</cxView>
						</cxView>
					</cxView>
					<!-- 商品信息 end-->
					<cxLine marginTop="20"></cxLine>
				</cxView>

			</cxView>
			<slot></slot>
		</cxView>
	</cxView>
</template>

<script>
	export default {
		name: "shopCar",
		data() {
			return {
				isEmpty: true,
				iPhoneX: false,
				datas: {},
				statisticsIndex: false,
				total: 0,
				isCut: true
			}
		},
		props: {
			list: {
				type: [Object, Array],
				default: {}
			},

			borderRadius: {
				type: [String, Number],
				default: '20'
			},
			padding: {
				type: String,
				default: ''
			},
			margin: {
				type: String,
				default: '20rpx'
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			marginLeft: {
				type: [String, Number],
				default: ''
			},
			marginBottom: {
				type: [String, Number],
				default: ''
			},
			marginRight: {
				type: [String, Number],
				default: ''
			},
			background: {
				type: String,
				default: 'white'
			},
		},
		// created() {
		// 	this.iPhoneX = uni.getStorageSync('iPhoneX')
		// 	if (this.list.length == 0) {
		// 		this.isEmpty = true
		// 	} else {
		// 		this.datas = this.list
		// 		this.isEmpty = false
		// 	}
		// },
		methods: {
			//商品选择
			goodsCheck(storeIndex, goodsIndex, goodsChecked) {
				if (goodsChecked == false ||  typeof goodsChecked === 'undefined') {
					this.datas[storeIndex].goods[goodsIndex].checked = true
				} else {
					this.datas[storeIndex].goods[goodsIndex].checked = false
				}
				//判断是否该店铺全选
				let storeChecked = true
				this.datas[storeIndex].goods.map((item, index) => {
					if (item.checked == false || typeof item.checked === 'undefined') {
						storeChecked = false
					}
				})
				if (storeChecked == false) {
					this.datas[storeIndex].checked = false
				} else {
					this.datas[storeIndex].checked = true
				}

				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item, index) => {
					if (item.checked == false || typeof item.checked === 'undefined') {
						statisticsIndex = false
					}
				})
				if (statisticsIndex == false) {
					this.statisticsIndex = false
				} else {
					this.statisticsIndex = true
				}

				this.$emit("carChange", this.datas);

			},
			//店铺选择
			storeCheck(storeIndex, storeCheck) {
				if (storeCheck == false || typeof storeCheck === 'undefined') {
					this.datas[storeIndex].checked = true
					this.datas[storeIndex].goods.find((item, index) => {
						item.checked = true
					})
				} else {
					this.datas[storeIndex].checked = false
					this.datas[storeIndex].goods.find((item, index) => {
						item.checked = false
					})
				}
				//判断是否全选
				let statisticsIndex = true
				this.datas.find((item, index) => {
					if (item.checked == false || typeof item.checked === 'undefined') {
						statisticsIndex = false
					}
				})
				if (statisticsIndex == false) {
					this.statisticsIndex = false
				} else {
					this.statisticsIndex = true
				}
				this.$emit("carChange", this.datas);

			},
			
			// 数量发生变化
			valChange(indexs, indexp, number) {
				// let shop = this.list[indexs];
				// let product = shop.proList[indexp];
				
				
				


			},
			// 去购买
			goBuy(){
				uni.switchTab({
					url:'/pages/main/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
